<template>
    <!-- 学员管理页面 -->
    <div>
        <div style="margin-top: 20px;display: flex;margin-left: 75px;align-items: center;">
            <div>
                <span style="font-size: 25px;font-weight: 600;margin-top: 20px;margin-right: 20px;">学员管理</span>
            </div>
            <el-button class="icon-plus" @click="clickChangePage('Addlearns')">
                <i class="el-icon-circle-plus" style="margin-right: 10px;font-size: 20px;"></i><span>新增学员</span>
            </el-button>
            <Addlearners v-if="Visiable" ref="dialog" @closeDialog="handleClose"></Addlearners>
        </div>
        <div class="classmangement">
            <!-- 搜索 -->
            <div class="search">
                <!-- 班级 -->
                <div class="class">
                    <p>班级</p>
                    <el-select v-model.trim="classmon" filterable placeholder="请选择" style="width: 100px;">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.label">
                        </el-option>
                    </el-select>
                </div>
                <!-- 学校 -->
                <div>
                    <p>学校</p>
                    <el-select v-model.trim="schoolmon" filterable placeholder="请选择" style="width: 160px;">
                        <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.label">
                        </el-option>
                    </el-select>
                </div>
                <!-- 咨询 -->
                <div>
                    <p>咨询</p>
                    <el-input v-model.trim="consultationmon" clearable placeholder="请输入内容" style="width: 140px;"></el-input>
                </div>
                <!-- 日期 -->
                <div>
                    <p>日期</p>
                    <el-date-picker v-model.trim="datemon" value-format="yyyy-MM-dd" type="date" placeholder="选择日期"
                        style="width: 140px;">
                    </el-date-picker>
                </div>
                <!-- 状态 -->
                <div>
                    <p>状态</p>
                    <el-select v-model.trim="statemon" filterable placeholder="请选择" style="width: 100px;">
                        <el-option v-for="item in options3" :key="item.value" :label="item.label" :value="item.label">
                        </el-option>
                    </el-select>
                </div>
                <!-- 搜索 -->
                <div>
                    <p style="margin-right: 240px;">搜索</p>
                    <el-input placeholder="请输入姓名" v-model.trim="input" clearable style="width: 200px;"></el-input>
                    <el-button @click="searchStudent"
                        style="background-color: rgb(23, 97, 253);color: white;">搜索</el-button>
                    <el-button @click="resetting" style="background-color: white;color: black;">重置</el-button>
                </div>
            </div>
            <div style="margin-top: 20px;margin-left: 20px; margin-bottom: 10px;">
                <el-table :data="tableData.slice((currentPage - 1) * pagesize, currentPage * pagesize)" border
                    style="width:99%" :cell-style="rowStyle">
                    <el-table-column prop="sname" label="姓名" width="125" align="center">
                    </el-table-column>
                    <el-table-column prop="school" label="学校" width="160" align="center">
                    </el-table-column>
                    <el-table-column prop="consulteacher" label="咨询" width="125" align="center">
                    </el-table-column>
                    <el-table-column prop="gradtime" label="日期" width="140" align="center">
                    </el-table-column>
                    <el-table-column prop="studentstate" label="状态" width="125" align="center">
                    </el-table-column>
                    <el-table-column prop="fraction" label="分数" width="125" align="center">
                    </el-table-column>
                    <el-table-column prop="phone" label="手机号" width="165" align="center">
                    </el-table-column>
                    <el-table-column prop="sid" label="学号" width="165" align="center">
                    </el-table-column>
                    <el-table-column prop="done" label="操作" width="135" align="center">
                        <template slot-scope="scope">
                            <!-- 编辑弹窗  -->
                            <el-popover :disabled="teemp" :model="ruleForm" placement="left-start" title="编辑班级" width="1000"
                                trigger="click">
                                <el-form :rules="rules" ref="ruleForm" class="demo-ruleForm">
                                    <div class="search">
                                        <!-- 姓名 -->
                                        <el-form-item label="姓名">
                                            <el-input v-model.trim="ruleForm.sname" placeholder="请输入内容"
                                                style="width: 190px;"></el-input>
                                        </el-form-item>
                                        <!-- 性别 -->
                                        <el-form-item label="姓别">
                                            <el-select v-model.trim="ruleForm.sex" filterable placeholder="请选择"
                                                style="width: 185px;">
                                                <el-option v-for="item in options2" :key="item.value" :label="item.label"
                                                    :value="item.label">
                                                </el-option>
                                            </el-select>
                                        </el-form-item>
                                        <!-- 在读状态 -->
                                        <el-form-item label="在读状态">
                                            <el-select v-model.trim="ruleForm.studentstate" filterable placeholder="请选择"
                                                style="width: 185px;">
                                                <el-option v-for="item in options3" :key="item.value" :label="item.label"
                                                    :value="item.label">
                                                </el-option>
                                            </el-select>
                                        </el-form-item>
                                    </div>
                                    <div class="search">
                                        <!-- 学校 -->
                                        <el-form-item label="学校">
                                            <el-input v-model.trim="ruleForm.school" placeholder="请输入内容"
                                                style="width:600px;"></el-input>
                                        </el-form-item>
                                    </div>
                                    <div class="search">
                                        <!-- 专业 -->
                                        <el-form-item label="专业">
                                            <el-input v-model.trim="ruleForm.professional" placeholder="请输入内容"
                                                style="width:285px;"></el-input>
                                        </el-form-item>
                                        <!-- 毕业时间 -->
                                        <el-form-item label="毕业时间">
                                            <el-date-picker v-model.trim="ruleForm.gradtime" type="date" placeholder="选择日期"
                                                style="width:285px;" value-format="yyyy-MM-dd">
                                            </el-date-picker>
                                        </el-form-item>
                                    </div>
                                    <div class="search">
                                        <!-- 手机号 -->
                                        <el-form-item label="手机号">
                                            <el-input v-model.trim="ruleForm.phone" placeholder="请输入内容"
                                                style="width:285px;"></el-input>
                                        </el-form-item>
                                        <!-- 出生年月 -->
                                        <el-form-item label="出生年月">
                                            <el-date-picker v-model.trim="ruleForm.borntime" type="date" placeholder="选择日期"
                                                style="width:285px;" value-format="yyyy-MM-dd">
                                            </el-date-picker>
                                        </el-form-item>
                                    </div>
                                    <div class="search">
                                        <!-- 紧急联系人 -->
                                        <el-form-item label="紧急联系人">
                                            <el-input v-model.trim="ruleForm.urgent" placeholder="请输入内容"
                                                style="width:280px;"></el-input>
                                        </el-form-item>
                                        <!-- 紧急联系人电话 -->
                                        <el-form-item label="紧急联系人电话">
                                            <el-input v-model.trim="ruleForm.urgentphone" placeholder="请输入内容"
                                                style="width:280px;"></el-input>
                                        </el-form-item>
                                    </div>
                                    <div class="search">
                                        <!-- 咨询老师 -->
                                        <el-form-item label="咨询老师">
                                            <el-input v-model.trim="ruleForm.consulteacher" placeholder="请输入内容"
                                                style="width: 190px;"></el-input>
                                        </el-form-item>
                                        <!-- 培训班级 -->
                                        <el-form-item label="培训班级">
                                            <el-select v-model.trim="ruleForm.cid" filterable placeholder="请选择"
                                                style="width: 185px;">
                                                <el-option v-for="item in options4" :key="item.value" :label="item.label"
                                                    :value="item.label">
                                                </el-option>
                                            </el-select>
                                        </el-form-item>
                                        <!-- 学费 -->
                                        <el-form-item label="学费">
                                            <el-input v-model.trim="ruleForm.tuition" placeholder="请输入内容"
                                                style="width: 185px;"></el-input>
                                        </el-form-item>
                                    </div>
                                    <div style="margin-top: 10px;">
                                        <el-button type="primary" @click="editstudent(ruleForm)">编辑学员</el-button>
                                    </div>
                                </el-form>
                                <i @click="open(scope.row)" slot="reference" type="text" size="small" class="el-icon-edit"
                                    style="color: rgb(70, 184, 239);"></i>
                            </el-popover>
                            <template>
                                <i type="text" size="small" class="el-icon-delete"
                                    style="margin-left: 30px;color: red;cursor: pointer;" slot="reference"
                                    @click="deleteStudent(scope.row)"></i>
                            </template>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[5, 8, 10]"
                layout="total, sizes, prev, pager, next, jumper" :current-page="currentPage" :total="tableData.length"
                style="margin-top: 20px;">
            </el-pagination>
        </div>
    </div>
</template>

<script>
import axios from 'axios'
import Addlearners from '../components/student/Addlearners.vue'
export default {
    components: {
        Addlearners
    },
    data() {
        return {
            Visiable: false,
            teemp: false,//编辑页面弹窗状态显示
            tableData: [],
            input: '',
            //班级
            options: [],
            classmon: '',
            //学校
            options1: [],
            //性别
            options2: [{
                value: '选项1',
                label: '男'
            }, {
                value: '选项2',
                label: '女'
            },],
            //状态
            options3: [{
                value: '选项1',
                label: '在读'
            }, {
                value: '选项2',
                label: '毕业'
            }],
            rules: {
                sname: [
                    { required: true, message: '请填写姓名', trigger: 'blur' },
                ],
                school: [
                    { required: true, message: '请填写学校', trigger: 'blur' }
                ],
                borntime: [
                    { required: true, message: '请选择出生年月', trigger: 'blur' }
                ],
                gradtime: [
                    { required: true, message: '请选择毕业时间', trigger: 'blur' }
                ],
                professional: [
                    { required: true, message: '请填写专业', trigger: 'blur' }
                ],
                urgent: [
                    { required: true, message: '请填写紧急联系人', trigger: 'blur' }
                ],
                tuition: [
                    { required: true, message: '请填写学费', trigger: 'blur' }
                ],
                consulteacher: [
                    { required: true, message: '请填写咨询老师', trigger: 'blur' }
                ],
                urgentphone: [
                    { required: true, message: '请填写紧急联系人电话', trigger: 'blur' }
                ],
                phone: [
                    { required: true, message: '请填写电话', trigger: 'blur' }
                ],
                sex: [
                    { required: true, message: '请选择性别', trigger: 'change' }
                ],
                studentstate: [
                    { required: true, message: '请选择在读状态', trigger: 'change' }
                ],
                cid: [
                    { required: true, message: '请选择培训班级', trigger: 'change' }
                ],
            },
            //培训班级
            options4: [],
            schoolmon: '',
            //输入框 咨询
            consultationmon: '',
            //选择框 日期
            datemon: '',
            //分数            
            statemon: '',
            currentPage: 1, //初始页
            pagesize: 5, //    每页的数据
            currentPage: 1,// 默认第几页
            ruleForm: [
                {
                    sname: '',//姓名
                    school: '',//学校
                    consulteacher: '',//咨询
                    enroltime: '',//入学日期
                    studentstate: '',//状态
                    fraction: '',//分数
                    urgentphone: '',//手机号码
                    sid: '',//学号
                }
            ],
            editid: '',//编辑学员id
            arr: [],//接收学员信息
        }
    },
    methods: {
        rowStyle() {
            return "text-align:center";
        },
        // 初始页currentPage、初始每页数据数pagesize和数据data
        handleSizeChange(val) {
            this.$data.pagesize = val//将每页显示的条数 = 改变的值
            // console.log(`每页 ${val} 条`)//每页下拉显示数据
        },
        handleCurrentChange(val) {
            // console.log(`当前页: ${val}`) //点击第几页
            this.$data.currentPage = val //然后将当前页 = 改变的值
        },
        //编辑学员       
        open(scope) {
            this.ruleForm = scope;
            this.editid = scope.sid
        },
        editstudent(ruleForm) {
            this.$axios.put(`/statusmon/editStudent/${this.editid}`, this.ruleForm,
                { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }).then((response) => {
                    console.log(response);
                    if (response.data.status == 200) {
                        this.teemp = true;
                        this.getstatus();
                        return this.$message({
                            type: 'success',
                            message: '编辑成功'
                        })
                    }
                })
        },
        //添加学员弹窗
        clickChangePage(data) {
            this.Visiable = true;
            this.$nextTick(() => {
                this.$refs.dialog.init(data)
            })
        },
        //搜索学员
        searchStudent() {
            //班级搜索
            if (this.classmon != '') {
                const data = new URLSearchParams();
                data.append('cid', this.classmon);
                axios.post('/statusmon/searchClass', data).then((response) => {
                    this.tableData = response.data.data
                })
            };
            //学校搜索
            if (this.schoolmon != '') {
                const data = new URLSearchParams();
                data.append('school', this.schoolmon);
                axios.post('/statusmon/searchSchool', data).then((response) => {
                    this.tableData = response.data.data
                })
            };
            //咨询搜索
            if (this.consultationmon != '') {
                const data = new URLSearchParams();
                data.append('consulteacher', this.consultationmon);
                axios.post('/statusmon/searchStudent', data).then((response) => {
                    this.tableData = response.data.data
                })
            }
            //时间搜索
            if (this.datemon != '') {
                const data = new URLSearchParams();
                data.append('gradtime', this.datemon);
                axios.post('/statusmon/searchTime', data).then((response) => {
                    this.tableData = response.data.data
                })
            }
            //状态搜索
            if (this.statemon != '') {
                const data = new URLSearchParams();
                data.append('studentstate', this.statemon);
                axios.post('/statusmon/searchState', data).then((response) => {
                    this.tableData = response.data.data
                })
            }
            ///名字搜索
            if (this.input == '') {
                return this.tableData = this.arr
            } else {
                console.log(12323);
                const data = new URLSearchParams();
                data.append('sname', this.input);
                axios.post('/statusmon/obscureStudent', data).then((response) => {
                    this.tableData = response.data.data;
                })
            }
        },
        //删除学员
        deleteStudent(ids) {
            this.$confirm('此操作将永久删除, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                let payload = {
                    id: ids.sid,
                };
                axios.delete('/statusmon/deleteStudent', { params: payload }).then((response) => {
                    console.log(response);
                    if (response.data.status !== 200) {
                        return this.$message({
                            type: 'error',
                            message: '删除学员失败'
                        });
                    }
                    this.$message({
                        type: 'success',
                        message: "删除学员成功"
                    });
                    this.getstatus();
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        //重置
        resetting() {
            this.statemon = '';
            this.schoolmon = '';
            this.classmon = '';
            this.consultationmon = '';
            this.datemon = '';
            this.input = '';
        },
        // 获取班级信息
        getclass() {
            this.$axios.get('/classmon/getClass',
                { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }).then((response) => {
                    response.data.data.forEach((element, key) => {
                        let c = {};//班级                    
                        c.value = element.classname;
                        c.label = element.classname;
                        this.options4.push(c);
                        this.options.push(c)
                    });;
                });
        },
        // 获取学员信息
        getstatus() {
            this.$axios.get('/statusmon/getStudent',
                { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }).then((response) => {
                    response.data.data.forEach((element, key) => {
                        let d = {};//学校
                        this.tableData = response.data.data;
                        this.arr = response.data.data;
                        d.value = element.school;
                        d.label = element.school
                        this.options1.push(d)
                    })
                })
        },
        handleClose(data) {
            this.getstatus();
        }

    },
    mounted() {
        //获取班级信息
        this.getclass();
        //获取学员信息
        this.getstatus();
    }
}
</script>

<style lang="less" scoped>
.classmangement {
    width: 1340px;
    height: 700px;
    margin: auto;
    margin-top: 30px;
    padding: 20px;
    box-sizing: border-box;
    border: 1px solid #eee;
    box-shadow: 0px 0px 30px rgba((0), 0, 0, 0.18);
}

.icon-plus {
    background-color: rgb(23, 97, 253);
    color: white;
}

.search {
    display: flex;
}

.search p {
    text-align: left;
    color: #69719D;
}

.search div {
    margin-right: 10px;
}

.class {
    margin-left: 20px;
}
</style>